<template>
  <section>
    <div class="flex select-no-type">
      <div class="row w150">
        <div v-if="trackType !== '无'">
          <i :class="trackType === '电子回单'
                ? 'iconfont icon-dianzihuidan orange'
                : 'iconfont icon-kuaididanhao orange'
            "></i>
        </div>
        <el-select v-model="trackType"
                   placeholder="请选择跟踪方式"
                   @change="changeTrackType">
          <el-option v-for="item in trackTypeList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
            <div>
              <i :class="
                  item.value === '电子回单'
                    ? 'iconfont icon-dianzihuidan'
                    :  item.value === '快递单号' ? 'iconfont icon-kuaididanhao' : ''
                "
                 style="margin-right: 5px"></i>{{ item.label }}
            </div>
          </el-option>
        </el-select>
      </div>
      <div v-if="trackType === '电子回单'"
           class="oneDevice row">
        <div class="deviceSty">{{ device }}</div>
        <el-select v-model="trackNo"
                   filterable
                   remote
                   clearable
                   placeholder="请输入编号后七位"
                   class="selectSty"
                   :remote-method="remoteMethod"
                   @blur="handleBlur"
                   @change="changeCode"
                   @clear="clear">
          <el-option v-for="item in codeList"
                     :key="item"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
      </div>
      <div v-if="trackType === '快递单号'"
           class="courierSty">
        <el-input v-model="trackNo"
                  size="medium"
                  placeholder="请输入快递单号"
                  onkeyup="this.value=this.value.replace(/[^\w]/g,'')"
                  style="width: 300px"
                  :maxlength="25"
                  :minlength="7"
                  @input="handleExpressNo" />
      </div>
    </div>
  </section>
</template>

<script>
import { order } from "@/api/index";
import { mapState } from "vuex";
export default {
  name: "Track",
  props: {
    no: String,
    type: {
      type: String,
      default: '无'
    }
  },
  data () {
    return {
      device: 35160808,
      inputCode: "",
      codeList: [],
      trackType: null,
      trackNo: null,
      trackTypeList: [
        {
          value: "无",
          label: "无"
        },
        {
          value: "电子回单",
          label: "电子回单"
        },
        {
          value: "快递单号",
          label: "快递单号"
        }
      ],
      equipmentStatus: "静止",
      deviceInfo: {},
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    user () {
      return JSON.parse(this.userInfo)
    },
    tenantId () {
      return this.user?.tenantId
    },
  },
  created () {
    this.trackType = this.type;
    this.trackNo = this.type === '电子回单' && this.no ? this.no.substring(8, this.no.length) : this.no;
    this.getCodeList();
  },
  methods: {
    async getCodeList () {
      let { code, data } = await order.deviceApi(
        1,
        100,
        `${this.device}${this.inputCode}`
      );
      if (code !== 0 || !data) return;
      this.codeList = data?.records && data?.records.length > 0 ? [...data.records] : [];
    },
    // 选择跟踪方式
    changeTrackType (type) {
      if (!type) return;
      this.trackType = type;
      this.trackNo = null;
      this.$emit("track", type, "trackType");
    },
    // 输入快递单号
    handleExpressNo (val) {
      this.trackNo = val;
      this.$emit("track", val, "trackNo");
    },
    // 清空电子回单
    clear () {
      this.trackNo = null;
      this.$emit("track", null, "trackNo");
    },
    // 输入2位查询电子回单列表
    remoteMethod (query) {
      this.inputCode = query;
      if (query.length > 2) {
        this.getCodeList();
      }
    },
    // 失焦查询
    handleBlur () {
      this.inputCode = "";
      this.getCodeList();
    },
    // 选择电子回单
    changeCode (code) {
      if (!code) return;
      this.trackNo = code.substring(8, code.length);
      this.showDevice();
      this.$emit("track", code, "trackNo");
    },
    // 查询选中的电子设备信息
    async showDevice () {
      let { code, data } = await order.showDeviceApi(`${this.device}${this.trackNo}`);
      if (code !== 0 || !data) return;
      this.deviceInfo = data;
      // humidity 湿度   temperature 温度
      this.$emit('getReply', this.deviceInfo?.humidity, this.deviceInfo?.temperature)
      if (data?.statusTime) {
        this.equipmentStatus =
          new Date().getTime() - new Date(data.statusTime).getTime - 42000 < 0
            ? "在线"
            : "静止";
      }
      if (data?.lithium < 79) {
        this.$message.warning("请确保设备充满电，以免影响轨迹或是其他功能");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.select-no-type {
  .device {
    text-align: center;
    width: 25%;
    height: 30px;
    line-height: 32px;
    display: block;
    border: none;
    background: #ccc2c23d;
  }
}
.row {
  display: flex;
  border: 1px solid #dcdfe6;
  height: 38px;
  padding: 0 10px;
  border-radius: 4px;
}
.w150 {
  width: 150px;
}
.oneDevice {
  width: 280px;
}
.mr5 {
  margin-right: 5px;
}
.deviceSty {
  margin-right: 10px;
  line-height: 40px;
  width: 90px;
}
.orange {
  color: var(--prev-icon-color-orange);
}
.courierSty {
  position: relative;
  margin-left: 10px;
}
/deep/ .el-select .el-input__inner {
  border: hidden !important;
  margin-top: 2px;
}
</style>
